<template>
	<view class="shoping">
		<u-navbar :is-back="false" :background="background" height="181">
			<view class="slot-wrap">
				<view class="title">商品管理</view>
				<view class="navContent">
					<view class="navContent-item">
						<view class="navName">待编辑</view>
						<view class="navNum">
							<u-count-to :start-val="0" :end-val="edited" color="white" font-size="30" bold>
							</u-count-to>
							<text style="font-size: 24rpx;">件</text>
						</view>
					</view>
					<view class="navContent-item">
						<view class="navName">待审核</view>
						<view class="navNum">
							<u-count-to :start-val="0" :end-val="examine" color="white" font-size="30" bold>
							</u-count-to>
							<text style="font-size: 24rpx;">件</text>
						</view>
					</view>
					<view class="navContent-item">
						<view class="navName">审核拒绝</view>
						<view class="navNum">
							<u-count-to :start-val="0" :end-val="refuse" color="white" font-size="30" bold>
							</u-count-to>
							<text style="font-size: 24rpx;">件</text>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;position: absolute;bottom: 0;">
				<view class="search">
					<view class="searchBox">
						<u-search placeholder="搜索商品名称" v-model="form.productName" :show-action="false"
							:clearabled="false">
						</u-search>
						<view class="searchBtn" @click="search()">搜索</view>
					</view>
					<view style="margin-left:30rpx;">
						<u-image :src="require('@/static/shoping/sx.png')" width="37rpx" height="37rpx" mode="aspectFit"
							@click="searchHandle">
						</u-image>
					</view>
					<view style="margin-left:30rpx;">
						<u-image :src="require('@/static/shoping/add.png')" width="37rpx" height="37rpx"
							mode="aspectFit" @click="addMall()">
						</u-image>
					</view>
				</view>

			</view>

		</u-navbar>
		<view>
			<u-card box-shadow="0px 0px 24rpx 0px rgba(150, 150, 150, 0.17)" border-radius="8" padding="20"
				sub-title-color="#357CD4" sub-title-size="28" :border="false" class="card"
				v-for="(item,index) in goodsList" :key="index">
				<view slot="head" class="head">
					<view class="time">创建时间：{{item.lastModifyDate}}</view>
					<view class="active">{{PRODUCTSTATUS[item.productStatus]}}</view>
				</view>
				<view slot="body" class="body">
					<view class="body-item">
						<view class="title">
							<view class="left">
								<view style="margin-left: 5rpx;">{{item.mname}}</view>
							</view>
						</view>
						<view class="goods">
							<view class="goods_img">
								<u-image :src="item.productUrl" width="100%" height="100%"></u-image>
							</view>
							<view class="goods_detail">
								<view style="color: #000000;">{{item.productName}}</view>
								<view>库存：{{item.totalStocks}} | 已付款数量：{{item.payNum}}</view>
								<view>销售价格：<text style="color: #357CD4;">¥{{item.productSalePrice}}</text></view>
								<view>商品编码：{{item.productCode}}</view>
							</view>
						</view>
						<view class="goods_price">
							<view class="goods_price_item">
								<view class="goods_price_item_l">抵扣后价格：{{item.productPrice}}</view>
								<view class="goods_price_item_l">已售数量：{{item.soldUnit}}</view>
								<view class="goods_price_item_l">
									审核状态：<span class="verifyStatus"
										@click="operation(item)">{{VERIFYSTATUS[item.verifyStatus]}}</span>
								</view>
							</view>
							<view class="goods_price_item">
								<view class="goods_price_item_l">糖果抵扣数量：{{item.productSweet}}</view>
								<view class="goods_price_item_l">糖果抵扣率：{{item.sweetDeductRate}}%</view>
								<view class="goods_price_item_l">商品锁定状态：{{LOCKSTATUS[item.lockStatus]}}</view>
							</view>
						</view>
						<view class="caozuo">
							<view>
								<u-button class="u-m-l-20" type="primary" size="mini" plain shape="circle"
									@click="bianji(item,item.productStatus==1?'3':'2')">
									{{item.productStatus==1?'查看详情':'编辑商品'}}
								</u-button>
								<u-button class="u-m-l-20" type="error" size="mini" plain shape="circle"
									@click="mallDelete(item)" v-if="item.productStatus!=1">删除商品</u-button>
								<u-button class="u-m-l-20" type="success" size="mini" plain shape="circle"
									v-if="item.productStatus==0" @click="fabu(item)">发布商品
								</u-button>
								<u-button class="u-m-l-20" type="warning" size="mini" plain shape="circle"
									v-if="item.productStatus==1||item.productStatus==2" @click="xiajia(item)">
									{{item.productStatus==1?'下架商品':item.productStatus==2?"上架商品":""}}
								</u-button>
							</view>
						</view>
					</view>
				</view>
			</u-card>
			<view style="height: 80rpx;line-height: 80rpx;">
				<u-loadmore :status="status" />
			</view>
		</view>

		<u-popup class="statusBarHeight" v-model="popupShow" mode="right" :safe-area-inset-bottom="true"
			border-radius="20" width="80%">
			<scroll-view scroll-y="true" :style="{height:height+'px'}">
				<view class="popupBody">
					<view class="Classification">
						<view class="title">商品状态</view>
						<view class="ClassificationBody">
							<u-row gutter="16">
								<u-col :span="4" v-for="(item,index) in PRODUCTSTATUSLIST" :key="index">
									<view class="itemBtn" :class="[index==statusType?'active':'']"
										@click="statusTypeClick(index,item.value)">{{item.label}}</view>
								</u-col>
							</u-row>
						</view>
					</view>
					<u-gap height="10" bg-color="#f2f2f2"></u-gap>
					<view class="Classification">
						<view class="title">审核状态</view>
						<view class="ClassificationBody">
							<u-row gutter="16">
								<u-col :span="4" v-for="(item,index) in AUDITSTATUS" :key="index">
									<view class="itemBtn" :class="[index==statusAudit?'active':'']"
										@click="statusAuditClick(index,item.value)">{{item.label}}</view>
								</u-col>
							</u-row>
						</view>
					</view>
					<u-gap height="10" bg-color="#f2f2f2"></u-gap>
					<view class="Classification">
						<view class="title">日期</view>
						<view class="ClassificationBody">
							<view>
								<u-input v-model="form.startDate" type="select" border placeholder="请选择开始日期"
									@click="show = true" />
							</view>
							<view style="padding:0 20rpx;">-</view>
							<view>
								<u-input v-model="form.endDate" type="select" border placeholder="请选择结束日期"
									@click="show = true" />
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<view class="popupFooter">
				<view class="btnbg">
					<view class="btnbg-item" style="color: #0094ff;" @click="reset()">重置</view>
					<view class="btnbg-item" style="color: white;" @click="confirm()">确定<text
							style="font-size: 24rpx;">({{total>999999?'10万+':total}}件商品)</text></view>
				</view>
			</view>
		</u-popup>

		<u-calendar v-model="show" :mode="mode" @change="timeOnchange"></u-calendar>

		<u-toast ref="uToast" />

		<u-modal v-model="modalShow" :zoom="false" :content='content' :show-title="false" :show-cancel-button="true"
			confirm-text="确定" cancel-text="取消" confirm-color="#357CD4" @confirm="productConfirm()"></u-modal>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				mode: 'range',
				height: 0,
				modalShow: false,
				content: '',
				edited: 0, //待编辑数量
				examine: 0, //待审核数量
				refuse: 0, //审核拒绝数量
				form: {
					productName: '', //商品名称
					productStatus: '', //上下架状态
					verifyStatus: '', //审核状态
					startDate: '', //开始时间
					endDate: '', //结束时间
					page: 1,
					size: 10
				},
				background: {
					background: "url(" + require('@/static/distribution/bg_2.png') + ")",
					backgroundRepeat: 'no-repeat',
					backgroundSize: 'cover'
				},
				goodsList: [],
				PRODUCTSTATUS: {
					0: '编辑',
					1: '上架',
					2: '下架',
					3: '发布',
					4: '删除',
				},
				VERIFYSTATUS: {
					1: '待审核',
					2: '审核通过',
					3: '审核拒绝'
				},
				LOCKSTATUS: {
					0: '开放',
					1: '锁定'
				},
				status: 'loading',
				total: 0,
				delId: '',
				controlsType: '',
				popupShow: false,
				//商品状态
				PRODUCTSTATUSLIST: [{
					value: '0',
					label: '编辑'
				}, {
					value: '1',
					label: '上架'
				}, {
					value: '2',
					label: '下架'
				}, {
					value: '3',
					label: '发布'
				}],
				//审核状态
				AUDITSTATUS: [{
					value: '1',
					label: '待审核'
				}, {
					value: '2',
					label: '审核通过'
				}, {
					value: '3',
					label: '审核拒绝'
				}],
				statusType: null,
				statusAudit: null
			}
		},
		onReady() {
			var _this = this;
			uni.getSystemInfo({
				success: function(res) {
					let height = res.windowHeight;
					//#ifdef APP-PLUS
					_this.height = height - 100;
					//#endif
					//#ifdef H5
					_this.height = height;
					//#endif
				}
			})
		},
		mounted() {
			this.getGoodsList();
			this.getStatistics();
		},
		onPullDownRefresh() {
			this.shuaxin();
		},
		onReachBottom() {
			if (this.goodsList.length >= this.total) {
				this.status = 'nomore'
				return;
			}
			this.status = 'loading';
			this.form.page++;
			this.getGoodsList();
			setTimeout(() => {
				if (this.goodsList.length >= this.total) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},
		methods: {
			//获取统计数据
			getStatistics() {
				this.$u.offlineApi.foodStatistics().then(res => {
					if (res.code == 0) {
						this.edited = res.data.edited;
						this.examine = res.data.examine;
						this.refuse = res.data.refuse;
					} else {
						this.edited = 0;
						this.examine = 0;
						this.refuse = 0;
					}
				})
			},
			//日期选择
			timeOnchange(e) {
				this.form.startDate = e.startDate;
				this.form.endDate = e.endDate;
				this.search();
			},
			//商品状态搜索
			statusTypeClick(index, val) {
				if (this.statusType == index) return
				this.statusType = index;
				this.form.productStatus = val;
				this.search();
			},
			//审核状态搜索
			statusAuditClick(index, val) {
				if (this.statusAudit == index) return
				this.statusAudit = index;
				this.form.verifyStatus = val;
				this.search();
			},
			//确定搜索
			confirm() {
				this.popupShow = false;
			},
			//重置
			reset() {
				this.form = {
					productName: '', //商品名称
					productStatus: '', //上下架状态
					verifyStatus: '', //审核状态
					startDate: '', //开始时间
					endDate: '', //结束时间
					page: 1,
					size: 10
				};
				this.statusType = null;
				this.statusAudit = null;
				this.shuaxin();
			},
			searchHandle() {
				this.popupShow = true;
			},
			//操作描述时间轴信息
			operation(item) {
				uni.navigateTo({
					url: `/pages/offline/shoping/operationDesc?desc=${JSON.stringify(item.msgVOList)}`,
					animationType: "slide-in-right"
				})
			},
			shuaxin() {
				this.form = {
					productName: '', //商品名称
					productStatus: '', //上下架状态
					verifyStatus: '', //审核状态
					startDate: '', //开始时间
					endDate: '', //结束时间
					page: 1,
					size: 10
				};
				this.goodsList = [];
				this.form.page = 1;
				this.getGoodsList();
				this.getStatistics();
			},
			getGoodsList() {
				this.$u.offlineApi.foodList({
					productName: this.form.productName, //商品名称
					productStatus: this.form.productStatus, //上下架状态
					verifyStatus: this.form.verifyStatus, //审核状态
					startDate: this.form.startDate, //开始时间
					endDate: this.form.endDate, //结束时间
					page: this.form.page,
					size: this.form.size
				}).then(res => {
					if (res.code == 0) {
						this.goodsList = [...this.goodsList, ...res.data];
						this.total = res.extraInfo;
						if (res.extraInfo < 10) {
							this.status = 'nomore'
						}
					}
				})
			},
			search() {
				this.form.page = 1;
				this.goodsList = []
				this.getGoodsList();
			},
			addMall() {
				uni.navigateTo({
					url: '/pages/offline/shoping/addingGoods?type=1',
					animationType: "slide-in-right"
				})
			},
			bianji(item, type) {
				uni.navigateTo({
					url: '/pages/offline/shoping/addingGoods?type=' + type + '&id=' + item.id,
					animationType: "slide-in-right"
				})
			},
			//上架/下架
			xiajia(item) {
				this.content = `是否${item.productStatus == 2 ? '上架' : '下架'}该条商品?`;
				this.modalShow = true;
				this.delId = item.id;
				this.controlsType = item.productStatus == 1 ? 2 : 1;
			},
			//删除
			mallDelete(item) {
				this.content = '是否确定删除该商品？';
				this.modalShow = true;
				this.delId = item.id;
				this.controlsType = 4;
			},
			//发布
			fabu(item) {
				this.content = '是否发布该条商品?';
				this.modalShow = true;
				this.delId = item.id;
				this.controlsType = 3;
			},
			productConfirm() {
				this.publicFunciont(this.delId, this.controlsType, '', '测试公寓有');
			},
			//(删除-上架-下架-发布)公共函数
			publicFunciont(id, status, msg, verifyName) {
				this.$u.offlineApi.foodStatus({
					id: id,
					status: status,
					msg: msg,
					verifyName: verifyName
				}).then(res => {
					if (res.code == 0) {
						this.$refs.uToast.show({
							title: this.PRODUCTSTATUS[status] + '成功!',
							type: 'success',
							icon: true
						});
						this.shuaxin();
					} else {
						this.$refs.uToast.show({
							title: this.PRODUCTSTATUS[status] + '失败!' + res.msg,
							type: 'success',
							icon: true
						});
					}
				});
			},
		}
	}
</script>
<style scoped lang="scss">
	.statusBarHeight {
		margin-top: var(--status-bar-height);
	}

	.shoping {
		.slot-wrap {
			height: 181px;
			width:100%;

			.title {
				color: white;
				font-size: 16px;
				font-weight: 700;
				height: 44px;
				line-height: 44px;
				width: 100%;
				text-align: center;
			}

			.navContent {
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 100%;
				color: white;
				font-size: 15px;
				height: 90px;

				.navContent-item {
					text-align: center;

					.navName {
						padding-bottom: 30rpx;
					}

					.navNum {
						font-weight: bold;
					}
				}
			}
		}

		.search {
			width: 100%;
			background-color: #77A9FD;
			height: 94rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;

			.searchBox {
				background-color: #EEEEEE;
				display: flex;
				align-items: center;
				border-radius: 30rpx;
				flex: 1;

				.searchBtn {
					width: 99rpx;
					height: 56rpx;
					background-color: #357CD4;
					border-radius: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
					margin-right: 4rpx;
				}
			}
		}

		.card {
			.head {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.time {
					font-weight: bold;
				}

				.active {
					color: #357CD4;
				}
			}

			.body {
				.body-item {
					.title {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 20rpx;

						.left {
							display: flex;
							align-items: center;
							font-size: 28rpx;
						}
					}

					.goods {
						display: flex;
						border-bottom: 1px solid #C8C8C8;
						padding-bottom: 23rpx;

						.goods_img {
							width: 160rpx;
							height: 160rpx;
							border-radius: 10rpx;
							overflow: hidden;
							margin-right: 20rpx;
						}

						.goods_detail {
							font-size: 28rpx;
							color: #999999;
						}
					}

					.goods_price {
						display: flex;
						justify-content: space-between;
						color: #969696;
						padding: 20rpx 0;

						.goods_price_item {
							.goods_price_item_l {
								padding: 4rpx 0;
							}

							.verifyStatus {
								text-decoration: underline;
								color: #357CD4;
							}
						}
					}

					.caozuo {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						margin: 20rpx 0;

						.btnMiddle {
							margin: 0 20rpx;
						}
					}
				}
			}
		}

		.card_body_top,
		.displaytwo {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 80%;

		.rect {
			background: #FFFFFF;
			box-shadow: 2rpx 6rpx 51rpx 0px rgba(55, 127, 166, 0.3);
			border-radius: 20rpx;

			.notice-header {
				width: 629rpx;
				height: 259rpx;
				background-image: url(@/static/shoping/tipsbg.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;

			}

			.notice-content {
				padding: 30rpx;

				.notice-title {
					font-size: 28rpx;
					color: #357CD4;
					text-align: left;
				}
			}

			.notice-footer {
				padding: 30rpx;

				.noticeBtn {
					background: #1F6ECF;
					box-shadow: 0px 12rpx 16rpx 0px rgba(28, 100, 224, 0.32);
					border-radius: 37rpx;
					font-size: 28rpx;
				}
			}
		}
	}

	.Classification {
		padding: 20rpx 30rpx 0;
		border-radius: 20rpx;
		background-color: white;
		margin-bottom: 20rpx;

		.title {
			font-weight: bold;
		}

		.ClassificationBody {
			margin: 30rpx 0 20rpx 0;

			.active {
				background-color: #ecf5ff !important;
				border-color: #a0cfff !important;
				color: #2979ff !important;
			}
		}
	}

	.itemBtn {
		width: 100%;
		border-radius: 40rpx;
		text-align: center;
		padding: 12rpx;
		font-size: 26rpx;
		box-sizing: border-box;
		clear: both;
		background-color: #F2F2F2;
		margin-bottom: 20rpx;
		border: 1px solid #F2F2F2;
		box-sizing: border-box
	}

	.popupFooter {
		background: white;
		width: 100%;
		height: 50px;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		border-top: 1rpx solid #f2f2f2;
	}

	.btnbg {
		background: url(@/static/shoping/btnbg.png);
		background-repeat: no-repeat;
		height: 40px;
		width: 100%;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.btnbg-item {
		flex: 1;
		text-align: center;
	}

	.productCodeBtn {
		border: 1rpx solid #F2F2F2;
		border-radius: 40rpx;
		padding: 12rpx 24rpx;
		font-size: 28rpx;
	}
</style>
